/*flex-direction: row | row-reverse | column | column-reverse;*/

.flex-container.row {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.flex-container.row-reverse {
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.flex-container.column {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.flex-container.column-reverse {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column-reverse;
}


/*flex-wrap: nowrap | wrap | wrap-reverse;*/

.flex-container.nowrap {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.flex-container.wrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flex-container.wrap-reverse {
    -webkit-flex-wrap: wrap-reverse;
    -ms-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
}


/*align-items: flex-start | flex-end | center | baseline | stretch;*/

.flex-container.align-items-start {
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.flex-container.align-items-end {
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.flex-container.align-items-center {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.flex-container.align-items-baseline {
    webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}

.flex-container.align-items-stretch {
    webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}


/*justify-content: flex-start | flex-end | center | space-between | space-around;*/

.flex-container.justify-start {
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.flex-container.justify-end {
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.flex-container.justify-center {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.flex-container.justify-space-between {
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.flex-container.justify-space-around {
    -webkit-justify-content: space-around;
    -ms-flex-pack: justify;
    justify-content: space-around;
}


/*align-content: flex-start | flex-end | center | space-between | space-around | stretch;*/

.flex-container.align-content-start {
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
}

.flex-container.align-content-end {
    -webkit-align-content: flex-end;
    -ms-flex-line-pack: end;
    align-content: flex-end;
}

.flex-container.align-content-center {
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
}

.flex-container.align-content-space-between {
    -webkit-align-content: space-between;
    -ms-flex-line-pack: justify;
    align-content: space-between;
}

.flex-container.align-content-space-around {
    -webkit-align-content: space-around;
    -ms-flex-line-pack: justify;
    /*distribute;*/
    align-content: space-around;
}

.flex-container.align-content-stretch {
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
}


/*align-self: auto | flex-start | flex-end | center | baseline | stretch;*/

.item.align-self-auto {
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}

.item.align-self-start {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
}

.item.align-self-end {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
}

.item.align-self-center {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
}

.item.align-self-baseline {
    -webkit-align-self: baseline;
    -ms-flex-item-align: baseline;
    align-self: baseline;
}

.item.align-self-stretch {
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}

.item.flex-grow1 {
    flex-grow: 1;
}

.item.flex-grow2 {
    flex-grow: 2;
}

.item.flex-grow3 {
    flex-grow: 3;
}

.item.flex-grow4 {
    flex-grow: 4;
}
html,body{ width:100%; min-height:100%; margin:0; padding:0; color:#ddd; font-size:14px; font-family:Verdana, Geneva, sans-serif;background-color:#333;}
*{
    box-sizing : border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.principal{ width:calc(50% - 40px); min-width:525px; margin:0 20px 20px 20px; float:left;}
.radio{ margin-bottom:20px;}
label{ line-height:200%;}
input[type=radio] { color:white; }
input[type=radio]:checked + label { color:orange; }
input[type=number]{ width:40px; margin-right:.5em;}
h1{ font-size:200%;margin:20px;}
h2{ font-size:180%;margin:0px;}
h4 a{ font-variant:small-caps; font-size:120%; color:#ddd; text-decoration:none;}
h4 small{font-variant: normal; font-size:80%; font-weight:normal; color:#57bcdb;}
table{ width:100%; margin-bottom:1em;}
table td{ width:50%; padding:3px;}
.principal:last-of-type h4 small{ color:#ff8080;}
.flex-container {
    border: 1px solid #555;
    display : -webkit-flex;
    display : -ms-flexbox;
    display : flex;
    padding:20px;
    width:100%;
}
.item{
    margin:0;
    display : inherit;
    padding:10px;
    width:100px;
    height:100px;
    -webkit-align-items: center;
    -ms-flex-align:center;
    align-items: center;
}
.item p{width:100%; text-align:center; color:#fff;}
#direction .item{flex-wrap:wrap;}
/*#wrap .item{ height:auto;}*/
#wrap{ width:400px;}
#align .item{height:auto; height:auto;flex-wrap:wrap;}
#align{ height:300px;}
#justify{ margin:20px 0; padding:20px 0;}
#alignContent{flex-wrap:wrap; height:600px;}
#alignContent .item{ height:auto;}
#FCI1{ height:300px;}
#FCI1 .item{ height:auto;}
#FCI3 .item{ width:25%;}
#FCI4 .item{ width:50%;}
#FCI5 .item{ width:20%;}
.nbsp{white-space: nowrap;}

/* @media only screen and (max-width:1100px){.principal{ width:calc(100% - 40px);}} */
@media only screen and (max-width:1200px){.principal{ width:calc(100% - 40px);}}
@media only screen and (max-width:580px) {
    .item{ width:50px;height:50px;}
    .principal{ width:calc(100% - 40px); min-width:initial;}
    .flex-container{width:100%; min-width:initial;}
    #wrap{ width:200px;}
}

.item-content {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    border: 1px solid #333;
}

body {
    padding-top: 35px;
}

